<!--点击查看图片组件,示例如下：
  <TiyPhotoView v-model="status.modalImage.isShow" :tiy-photo="status.modalImage.url"></TiyPhotoView>
-->
<template>
  <Modal
    v-model="photoShow"
    title=""
    :styles="{align:'center', maxWidth:'80%'}"
    :scrollable=true
    @on-visible-change="showOrHide"
  >
    <div slot="footer"  style="border-top: none !important;"></div>
    <div align="center" ><img :src="tiyPhoto" class="photo" /></div>
  </Modal>
</template>

<script>
    export default {
        name: "TiyPhotoView",
      model:{
        prop: 'tiyShow',
        event: 'input'
      },
     props:{
       tiyShow:{
         type:Boolean,
         default:false
    },
       tiyPhoto:{
         type:String,
         default:""
       }
     },
      data(){
          return {
            photoShow:false
          }

     },
      watch:{
        tiyShow(newValue){
          if (newValue!==this.photoShow) {
            this.photoShow = newValue;
          }

        }
      },
      methods:{
        showOrHide(visible){
          if (!visible){
            this.$emit('input',false);
          }

        }
      }

    }
</script>

<style lang="less" scoped>
  @import  (once,optional)  "../css/base";

  .photo{
    max-width: 80%;
    min-width: 40%;
    min-height: 30%;
    max-height: 80%;
    padding: 0.5rem ;
    margin-top: 1rem;
  }

</style>
